<template>
  <div class="page-common-layout">
    <div class="page-common-content">
      <tool-bar
        @search="$refs.table.refresh(true)"
        @reset="
          () => {
            (this.queryParam = {}), $refs.table.refresh(true);
          }
        "
      >
        <template slot="toolBtn" slot-scope="scope">
          <a-button
            class="cu-btn-primary"
            icon="plus"
            @click="handleAdd({ isView: false })"
            >{{ $ct("add", "新增") }}</a-button
          >
          <a-button
            class="cu-btn-danger"
            icon="delete"
            @click="handleSub($refs.table.selectedRowKeys)"
            >{{ $ct("delete", "删除") }}</a-button
          >
        </template>
        <template slot="toolForm">
          <a-form-item :label="$ct('LeaveTitle','休假标题')">
            <a-input v-model="queryParam.title" :placeholder="$ct('LeaveTitle','休假标题')" />
          </a-form-item>
        </template>
      </tool-bar>
      <DataGrid
        ref="table"
        :columns="columns"
        :url="url"
        rowKey="uuid"
        :queryParam="queryParam"
      >
        <span slot="sex" slot-scope="{ text }">
          {{ text | sexFilter }}
        </span>
        <span slot="testCombobox" slot-scope="{ text }">
          {{ text | testComboboxFilter }}
        </span>
        <span slot="renderState" slot-scope="{ text, record, index }">
          <a-tag v-if="text == '草稿'" :color="'blue'">
            {{ text }}
          </a-tag>
          <a-tag v-else-if="text == '审核中'" :color="'orange'">
            {{ text }}
          </a-tag>
          <a-tag v-else-if="text == '已完成'" :color="'green'">
            {{ text }}
          </a-tag>
        </span>
        <span slot="renderAction" slot-scope="{ text, record }">
          <template>
            <template v-if="record.state == '草稿'">
              <a @click="handleEdit({ ...record, isView: false })">{{ $ct("edit", "编辑") }}</a>
              <span class="action-margin"></span>
                 <a @click="handleSub(record)" class="action-delete">{{ $ct("delete", "删除") }}</a>
               <span class="action-margin"></span>
              <a @click="submitDraft(record)">{{ $ct("submit", "提交") }}</a>
              <span class="action-margin"></span>

            </template>
            <template v-else>
              <a @click="handleView(record)">{{ $ct("detail", "详情") }}</a>
               <span class="action-margin"></span>
                 <a @click="handleFlow(record)">{{ $ct("workflowChart", "流程图") }}</a>
               <span class="action-margin"></span>
              <a @click="handleGetListComments(record)">{{ $ct("approvalComments", "审批意见") }}</a>
              <span class="action-margin"></span>
            </template>
          </template>
        </span>
      </DataGrid>
      <edit-form
        ref="createModal"
        :visible="visible"
        :loading="confirmLoading"
        :model="mdl"
        @cancel="handleCancel()"
        @ok="handleStorage(1)"
        @storage="handleStorage(2)"
      />
      <flowChat ref="flowChatForm"></flowChat>
      <comment-modal ref="commentModal"></comment-modal>
    </div>
  </div>
</template>

<script>
import { dataGridMixin } from "@/mixins/dataGridMixin";
import { DataGrid } from "@/components";
import commentModal from "./comment";
import editForm from "./edit.vue";
import flowChat from "../apiFlowableTask/myMission/flowChat.vue";

export default {
  name: "TableList",
  mixins: [dataGridMixin],
  components: { DataGrid, editForm, flowChat, commentModal },
  data() {
    return {
      columns: [
        { title: "休假标题", dataIndex: "title",langCode:"LeaveTitle" },
        { title: "请假人", dataIndex: "creatorId", langCode:"personleave" },
        { title: "天数", dataIndex: "days" ,langCode:"Days" },
        {
          title: "休假类型",
          dataIndex: "itemText",
          align: "center",
          langCode:"LeaveType"
        },
        {
          title: "状态",
          dataIndex: "state",
          align: "center",
          scopedSlots: { customRender: "renderState" },
        },
        {
          title: "操作",
          width: 200,
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "renderAction" },
        },
      ],
      visible: false,
      confirmLoading: false,
      mdl: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      url: {
        getPageSet: "/workflow/oaLeave/getPageSet",
        save: "/workflow/oaLeave/save",
        update: "/workflow/oaLeave/update",
        deleteBatch: "/workflow/oaLeave/deleteBatch",
      },
      isView: false,
    };
  },
  methods: {
    // 存为草稿
    handleStorage(e) {
      let that = this;
      let url = "";
      if (e === 2) {
        url = "/workflow/oaLeave/draft";
      } else {
        url = "/workflow/oaLeave/save";
      }
      let form = that.$refs.createModal.form;
      form.validateFields((errors, values) => {
        if (!errors) {
          that.confirmLoading = true;
          that
            .$post(url, values)
            .then((res) => {
              if (res.statusCode === 200) {
                that.$message.success(res.message);
                that.$refs.table.refresh();
              } else {
                that.$message.error(res.message);
              }
            })
            .finally(() => {
              that.visible = false;
              that.confirmLoading = false;
            });
        }
      });
    },
    // 提交
    submitDraft(record) {
      const that = this;
      that.$confirm({
        title: "提示",
        content: "确认提交吗？",
        okText: "确认",
        cancelText: "取消",
        onOk() {
          that
            .$post("/workflow/oaLeave/save", record)
            .then((res) => {
              if (res.statusCode === 200) {
                that.$message.success(res.message);
                that.$refs.table.refresh();
              } else {
                that.$message.error(res.message);
              }
            })
            .finally(() => {
              that.visible = false;
              that.confirmLoading = false;
            });
        },
      });
    },
    // 流程图
    handleFlow(record) {
      this.$post("/workflow/oaLeave/clickFlowChart", {
        uuid: record.uuid,
      }).then((res) => {
        if (res.statusCode != 300) {
          const jsonData = res;
          this.$refs.flowChatForm.loadData(
            jsonData,
            jsonData.lists.actDeModelId,
            jsonData.lists.actDeModelKey,
            jsonData.lists.actDeModelName,
            jsonData.lists.flowDesign,
            record
          );
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 预览
    handleView(record) {
      this.visible = true;
      this.mdl = record;
      this.mdl.isView = true;
			this.$refs.createModal.title = this.$ct("detail","详情");
      if (this.$refs.createModal.edit) this.$refs.createModal.edit(this.mdl);
    },
    handleGetListComments(record) {
      this.$refs.commentModal.getCommentList(record.uuid);
      // this.$post('/workflow/oaLeave/getListCommentsByBusinessKey', {
      // 	businessKey: record.uuid,
      // }).then((res) => {
      // 	if (res.statusCode != 300) {
      // 		console.log(res);
      // 	} else {
      // 		this.$message.error(res.message);
      // 	}
      // });
    },
  },
};
</script>

<style lang="less"></style>
